<template>
    <el-form :rules="rules" :ref="formName" :model="form" class="dept-form" label-width="80px">
        <el-row>
            <el-col :span="24">
                <el-form-item label="头像">
                    <img-upload :img-url="form.headImg" @uploaded="(val)=>{form.headImg=val}" @removed="form.headImg=null"></img-upload>
                </el-form-item>
            </el-col>
            <el-col :span="24" >
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="昵称" prop="nickName">
                    <el-input v-model="form.nickName"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="updateable">
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24" >
                <el-form-item label="角色" prop="roleIdList">
                    <el-select @change="setRoleName" style="width: 100%" ref="roleSelect" v-model="form.roleIdList" multiple placeholder="请选择">
                        <el-option
                                v-for="item in this.roleList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24" >
                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" :row="3" v-model="form.remark"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">开启</el-radio>
                        <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item>
                    <i class="el-icon-warning"></i>
                    <span style="margin-left: 6px;">新增用户默认密码为：123456</span>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>

<script>
    import ImgUpload from '../../../components/imgUpload'

    export default {
        components: {
            ImgUpload
        },
        props: {
            form: {
                type: Object,
                default: {
                    headImg: null,
                    name: null,
                    nickName: null,
                    username: null,
                    roleIdList: [],
                    phone: null,
                    email: null,
                    remark: null,
                    status: 1
                }
            },
            updateable: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                formName: 'userForm',
                roleList: [],

                rules: {
                    name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' },
                    ],
                    nickName: [
                        { required: true, message: '昵称不能为空', trigger: 'blur' },
                    ],
                    username: [
                        { required: true, message: '用户名不能为空', trigger: 'blur' },
                    ],
                    roleIdList: [
                        { required: true, message: '角色不能为空', trigger: 'blur' },
                    ]
                }
            }
        },
        mounted() {
            this.getRoleList()
        },
        methods: {
            validate(func = (valid) => {}) {
                this.setRoleName()
                this.$refs[this.formName].validate(func)
            },
            resetFields() {
                this.$refs[this.formName].resetFields()
            },
            getRoleList() {
                this.$service.system.role.list().then((res) => {
                    this.roleList = this.$clone(res)
                })
            },
            setRoleName() {
                this.form.roleName = this.roleList.filter(e=>this.form.roleIdList.includes(e.id)).map(e=>e.name).join(',')
            }
        }
    };
</script>
